<template>
  <div class="mypage">
    <div class="header">
      <div class="header-title">浙江省智慧数字征迁系统</div>
      <div class="nav">
        <nav-menu> </nav-menu>
      </div>
      <div class="username">
        <div class="top-imag-avatar">
          <img :src="userInfo.images" />
        </div>
        <!--<span class="user-name">{{ userInfo.name }}</span> -->
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.name
            }}<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in downBtnInfo" :key="index"
              ><i :class="item.icon"></i>{{ item.title }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="main">
      <div class="main-container">
        <div class="main-left">
          <left-menu></left-menu>
        </div>
        <div class="main-right">
          <router-link to="page2">首页</router-link>
          <router-link to="homepage">首页</router-link>
          <router-link to="workcenter">业务办理</router-link>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavMenu from "./children/NavMenu.vue";
import LeftMenu from "./children/LeftMenu.vue";
export default {
  name: "HomePage",
  components: {
    LeftMenu,
    NavMenu,
  },
  data() {
    return {
      activeIndex: "1",
      userInfo: {
        id: "001",
        name: "张三",
        province: "浙江省",
        city: "杭州市",
        images: require("@/assets/szzq_images/top_img_avatar.png"),
      },
      downBtnInfo: [
        { title: "修改密码", icon: "el-icon-lock" },
        { title: "退出登录", icon: "el-icon-switch-button" },
      ],
    };
  },
  mounted() {
    // 当跳转到homepage时，隐藏导航栏tabbar,this.$route.name == "/homepage"
    let x = document.querySelector(".tabbar");
    var rt = this.$route.name
    if (rt== "/homepage") {
      // x.style.display = "none";
    } else {
      // x.style.display = "block";
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.mypage {
  z-index: 10;
  position: sticky;
  height: 100%;
  width: 100%;
  background-color: green;
  overflow: hidden;
}
.header {
  height: 64px;
  min-width: 800px;
  background-color: #929b6e;
}
.main {
  position: absolute;
  width: 100%;
  min-width: 800px;
  top: 64px;
  bottom: 0;
  overflow: hidden;
  background-color: #a1b5bd;
}
.header {
  display: flex;
  height: 68px;
  padding: 0 30px;
  min-width: 1000px;
  background: url("~@/assets/szzq_images/top_bg.png");
  background-size: cover;
}
.header-title {
  line-height: 68px;
  width: 284px;
  color: #ffffff;
  font-size: 24px;
}
.nav {
  flex: 1;
  line-height: 68px;
  /* background: red; */
  display: flex;
  align-items: center;
}
.username {
  width: 138px;
  line-height: 68px;
  color: #ffffff;
}
/* 导航栏菜单样式 */
.el-menu {
  height: 68px;
  /* 将element-ui导航菜单背景颜色设置为透明色 */
  background-color: transparent;
}

.el-menu--horizontal {
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item {
  height: 68px;
  line-height: 68px;
  /* 设置菜单文字失活颜色 */
  color: #ffffff;
}
/* 设置悬浮颜色样式--s */
.el-menu--horizontal > .el-menu-item[data-v-b56f2db2]:hover {
  font-size: 20px;
  color: orange;
  background-color: transparent;
}

/* 菜单激活样式设置，important慎用*/
.el-menu-item.is-active {
  color: #ffffff !important;
  background-color: #3370ff !important;
}
.top-imag-avatar {
  display: inline-block;
  margin-right: 8px;
}
.top-imag-avatar img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
/* 用户名称部分 */
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.main-container {
  display: flex;
  /* margin: 16px auto; */
  /* padding: 0 16px; */
  justify-content: space-evenly;
}
.main-left {
  /* flex: 250px; */
  width: 250px;
  height: 672px;
  /* margin: 0 8px 0 16px; */
  background-color: grey;
}

.main-right {
  flex: 1;
  height: 672px;
  /* margin: 0 16px 0 8px; */
  background-color: green;
}
</style>